
import { Chat } from "../src/chat";
import { ui } from "../src/ui";
function randomString(len: number) {
  let ret = ''
  const t = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz1234567890";
  const a = t.length;
  for (; len >= 0; --len) {
    ret += t.charAt(Math.floor(Math.random() * a))
  }
  return ret
}
ui.applyStyle(document.body, {
  display: 'flex',
  flexDirection: 'column'
})

export namespace Faker {
  let _id = 0;
  export const id = () => '' + (_id++);

  export function msg(): Chat.Message {
    let ret: Chat.Message = {
      type: Chat.MessageType.text,
      id: Faker.id(),
      content: randomString(Math.random() * 140),
      isSelf: false,
      timestamp: Date.now(),
      sender: {
        head: 'https://www.baidu.com/img/flexible/logo/pc/result@2.png',
        name: randomString(Math.random() * 20),
      }
    }
    const rand0 = Math.random()
    if (rand0 < 0.1) {
      ret = {
        ...ret,
        type: Chat.MessageType.img,
        content: 'https://www.baidu.com/img/flexible/logo/pc/result@2.png',
      }
    } else if (rand0 < 0.2) {
      ret = {
        ...ret,
        type: Chat.MessageType.customBubble,
        content: 'Chat.MessageType.customBubble' + randomString(Math.random() * 140),
      }
    } else if (rand0 < 0.3) {
      ret = {
        ...ret,
        type: Chat.MessageType.emoticon,
        content: 'https://www.baidu.com/img/flexible/logo/pc/result@2.png',
      }
    } else if (rand0 < 0.4) {
      ret = {
        ...ret,
        type: Chat.MessageType.customBody,
        content: 'Chat.MessageType.customRow' + randomString(Math.random() * 140),
      }
    } else if (rand0 < 0.5) {
      ret = {
        ...ret,
        type: Chat.MessageType.system,
        content: 'Chat.MessageType.system' + randomString(Math.random() * 140),
      }
    } else if (rand0 < 0.6) {
      ret = {
        ...ret,
        type: Chat.MessageType.file,
        content: 'Chat.MessageType.system',
        file: {
          name: randomString(Math.random() * 140),
          size: Math.random() * 1024 * 1024 * 1024 * 1024,
        }
      }
    }

    if (Math.random() < 0.5) {
      ret = {
        ...ret,
        isSelf: true
      }
    }
    return ret;
  }

  export function msgs(): Chat.Message[] {
    const msgs: Chat.Message[] = []
    for (let i = 0; i < 100; ++i) {
      msgs.push(Faker.msg())
    }
    return msgs
  }
}
let _memory = {
  timerId: 0
};

const debugRow = ui.node('div', {}, [
  ui.node('button', {
    onclick(e) {
      mlv.setMessages(Faker.msgs())
    }
  }, 'reset'),
  ui.node('button', {
    onclick(e) {
      mlv.appendMessages([Faker.msg()])
    }
  }, 'append'),
  ui.node('button', {
    onclick(e: MouseEvent) {
      mlv.insertMessages(0, [Faker.msg()])
    }
  }, 'load more'),
  ui.node('button', {
    onclick(e: MouseEvent) {
      mlv.removeMessages([mlv.getMessages()[0]])
    }
  }, 'remove'),
  ui.node('button', {
    onclick(e: MouseEvent) {
      mlv.updateMessage(1, Faker.msg())
    }
  }, 'update 1'),
  ui.node('button', {
    onclick(e: MouseEvent) {
      mlv.nameVisible = !mlv.nameVisible
    }
  }, 'toggle sender name'),
])

document.body.appendChild(debugRow)

const mlv = new Chat.MessageListView(document.body);
mlv.onClickHead = msg => alert(JSON.stringify(msg))
mlv.onClickImg = msg => alert(JSON.stringify(msg))
mlv.onClickFile = msg => alert(JSON.stringify(msg))
mlv.renderCustomBubble = msg => msg.content;
mlv.renderCustomBody = msg => msg.content;
mlv.container.onscroll = e => {
  if (mlv.container.scrollTop < 3000 && !_memory.timerId) {
    _memory.timerId = setTimeout(() => {
      mlv.insertMessages(0, Faker.msgs())
      _memory.timerId = 0;
    }, 250);
  }
}

mlv.setMessages(Faker.msgs())

ui.applyStyle(mlv.container, {
  overflow: 'auto',
  flexShrink: '0',
  flex: '1',
  background: '#f0f0f0'
})